<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			.mui-bar-nav ~ .mui-content .mui-pull-top-pocket{
  top: 180px !important;
}
.mui-scroll-wrapper{position: static;}
			.mui-table-view-cell h3{font-size:18px;white-space: normal;line-height: 22px;}
			.mui-table-view-cell p{white-space: normal;}
			.mui-navigate-right:after{display:none;}
			
			.mui-table-view-chevron .mui-table-view-cell{padding-right:15px;}
			.mui-table-view-chevron .mui-table-view-cell>a:not(.mui-btn){margin-right: 0;padding-right:0;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <h1 class="mui-title">一些新闻</h1>
		</header>
		<div class="mui-content">
			<!--下拉刷新容器-->
			<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
			  <div class="mui-scroll">
			    <!--数据列表-->
			    <ul class="mui-table-view mui-table-view-chevron">
			      
			    </ul>
			  </div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/template-web.js" type="text/javascript" charset="utf-8"></script>
		<script id="tpl-user" type="text/html">
			
			<% for(var i=0;i<data.length;i++) { %>
					<li class="mui-table-view-cell" data-id="<%= data[i].link %>">
			            <a class="mui-navigate-right" href="javascript:;" >
			                <h3><%= data[i].title %></h3>
							<p><%=  data[i].desc %></p>
			            </a>
			       </li>
			<% } %>
			</script>
		<script type="text/javascript">
			mui.init({
			  pullRefresh : {
			    container:refreshContainer,//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
			    up : {
			      height:50,//可选.默认50.触发上拉加载拖动距离
			      auto:true,//可选,默认false.自动上拉加载一次
			      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
			      contentnomore:'别扯了。。。没有了',//可选，请求完毕若没有更多数据时显示的提醒内容；
			      callback :pullfreshUp //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
			    }
			  }
			});
			var n=0;
			function pullfreshUp(){
				n++;//每上拉一次页数加1 
				//ajax请求接口
				mui.get("http://route.showapi.com/109-35",{
					showapi_appid:37443,
					showapi_sign:"a800c021fcb543e8a1728b7e0f8a7d3e",
					maxResult:5,//每页显示5条数据
					page:n
				},function(result){
					if(result && result.showapi_res_code==0){//如果结果不为空并且结果返回代码为0
						//得到响应的需要的数据
						var data = result.showapi_res_body.pagebean.contentlist;
//						console.log(data);
						var html = template('tpl-user', {
						    data: data,//将数据传给模板引擎
						    page:n
						});
						//把请求的字符串添加到页面
						document.querySelector(".mui-table-view").innerHTML += html;	
					}else{
						//输出错误信息
						mui.alert(res.showapi_res_error);
					}
					mui('#refreshContainer').pullRefresh().endPullupToRefresh();
//					console.log(n);
					if(n>=5){
						//如果大于等于5页，就停止，上拉加载最多下拉5页
						mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
					}
				},"json");
//				
				
				
				
				
			}
			
//			mui.init({
//				preloadPages:[{
//				id:'newsdetail.html',
//				url:'newsdetail.html' 
//				}
//				]
//			});
			mui.plusReady(function(){
				//初始化预加载详情页面
				var detailPage = mui.preload({
					url: 'newsdetail.html',
					id: 'detail'
				});
				//点击相应的li传相应的id，跳到详情页
				mui('.mui-content').on('tap', 'li', function(e) {
					var linkid = this.getAttribute('data-id');
					//触发详情页面的ready事件
					mui.fire(detailPage,'ready',{
						id:linkid
					});
					//跳转到新页面
					mui.openWindow({
						url: 'newsdetail.html',
						id:'detail'
					});
				})
			})
			
		</script>
	</body>

</html>